<script setup lang="ts">
defineProps({
  dataList: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

<template>
  <div>
    <div class="title">
      <svg-icon icon-class="link" />
      友情连接
    </div>
    <div class="row">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="col col-12 col-md-4"
        style="padding: 10px"
      >
        <div class="links-item">
          <a class="item" target="_blank" :href="item.url">
            <div class="avatar-item">
              <img :src="item.avatar" :alt="item.name" />
            </div>
            <div class="item-content">
              <span class="web-name">{{ item.name }}</span>
              <div class="web-info">{{ item.summary }}</div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}

.links-item {
  position: relative;
  background-color: #8fbca275;
  border-radius: 10px;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 10px;
    background-color: #20a0ff;
    transition-timing-function: ease-out;
    transition-duration: 0.35s;
    transition-property: transform;
    transform: scale(0);
  }
  &:hover {
    &:before {
      transform: scale(1);
    }
    .item .avatar-item {
      width: 0;
    }
  }
  .item {
    display: flex;
    position: relative;
    width: 85%;
    height: 118px;
    align-items: center;
    text-decoration: none;
    color: #303133;
    .avatar-item {
      width: 50px;
      height: 50px;
      margin: 0 10px;
      transition: width 0.35s !important;
      img {
        width: inherit;
        height: inherit;
        border-radius: 50%;
        transition: transform 0.35s;
      }
    }
    .item-content {
      margin-left: 15px;
      width: 100%;
      .web-name {
        position: relative;
        font-weight: 700;
        padding: 5px 0;
        margin-bottom: 10px;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #909399;
        }
      }
      .web-name,
      .web-info {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        min-width: 60%;
      }
    }
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  margin-right: -12px;
  margin-left: -12px;
  .col {
    box-sizing: border-box;
  }
}

.title {
  font-size: 21px;
  font-weight: 700;
}

@media screen and (min-width: 760px) {
  .col-md-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media screen and (max-width: 759px) {
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
</style>
